<template>
    <div class="register_page">
        <font class="page_title">淘书<font class="page_title_small">用户注册</font></font>
        <Steps class="steps" :current="3">
            <Step title="进行邮箱验证"></Step>
            <Step title="绑定银行卡"></Step>
            <Step title="设置用户信息"></Step>
            <Step title="注册成功"></Step>
        </Steps>
        <div class="dividing_line"></div>
        <Card class="success_card">
                <h1 class="card_title">注册成功</h1>
                <img class="card_img" src="../../assets/registerSuccess.png">
                <h3>将在{{countdownTime}}s后跳回登录页</h3>
                <Button @click="() => {this.$router.push('/login');}" class="nextStep" type="success">立即跳转</Button>
        </Card>
        <my-footer></my-footer>
    </div>
</template>
<script>
import myFooter from '../../components/footer'
export default {
    components: { myFooter },
    data() {
        return {
            bankCard: null,
            number: 19,
            countdownTime: 5
        }
    },
    created() {
        let that = this;
        let clock = setInterval(() => {
            that.countdownTime--;
            if (that.countdownTime < 0) {
                clearInterval(clock);
                that.$router.push('/login');
            }
        }, 1000);
    },
    methods: {
        nextStep() {
            if(this.checkBankCard()) {
                this.$router.push({
                    path: '/registerUserInfo',
                    query: {
                        userId: this.$route.query.userId,
                        bankCard: this.bankCard
                    }
                });
            }
        },
        checkBankCard() {
            if(/^([1-9]{1})(\d{14}|\d{18})$/.test(this.bankCard)) {
                return true;
            }
            this.$Message.error("请输入正确的银行卡号！");
            return false;
        }
    },
}
</script>

<style scoped>
.register_page{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page_title{
    position: fixed;
    font-size: 45px;
    font-weight: 800;
    font-family: cursive;
    color: rgb(252, 23, 23);
    top: 50px;
    left: 200px;
}
.page_title_small{
    margin-left: 7px;
    font-size: 25px;
    color: black;
    font-weight: 300;
    font-family: Arial, Helvetica, sans-serif;
}
.steps{
    width: 1600px;
    margin-left: 320px;
    margin-top: 180px;
}
.dividing_line{
    margin-top: 2vh;
    height: 1px;
    width: 100%;
    border-top: 2px solid rgb(250, 149, 67);
    margin-bottom: 40px;
}
.success_card{
    width: 600px;
    height: 600px;
    text-align:center;
}
.card_title{
    margin-top: 20px;
}
.card_img{
    width: 220px;
}
.nextStep{
    margin-top: 124px;
    width: 200px;
    height: 35px;
    background-color: rgb(65, 173, 73);
}
</style>
